<template>
	<view>
		<view :class="['area-picker', data.area_picker_show?'active':'']">
    <view @tap="$emit('hideAreaPicker',$event)" class="area-picker-bg">
        <scroll-view></scroll-view>
    </view>
    <view class="area-picker-body">
        <scroll-view>
            <view class="area-picker-top">
                <text @tap="$emit('hideAreaPicker',$event)" class="area-picker-cancel">取消</text>
                <text @tap="$emit('areaPickerConfirm',$event)" class="area-picker-confirm">确认</text>
            </view>
            <view class="area-picker-row">
                <picker-view @change="$emit('areaPickerChange',$event)" indicatorStyle="height: 100upx" style="width: 100%; height: 500upx;">
                    <picker-view-column>
                        <view style="line-height: 100upx;height: 100upx;text-align: center" v-for="(item,index) in data.area_picker_province_list" :key="index">{{item.name}}</view>
                    </picker-view-column>
                    <picker-view-column>
                        <view style="line-height: 100upx;height: 100upx;text-align: center" v-for="(item,index) in data.area_picker_city_list" :key="index">{{item.name}}</view>
                    </picker-view-column>
                    <picker-view-column>
                        <view style="line-height: 100upx;height: 100upx;text-align: center" v-for="(item,index) in data.area_picker_district_list" :key="index">{{item.name}}</view>
                    </picker-view-column>
                </picker-view>
            </view>
        </scroll-view>
    </view>
</view>

	</view>
</template>

<script>var myVue = {};
	export default {
		props:['data'],
		data() {
			return {
				
			};
		},
	}
</script>

<style scoped>
.area-picker {
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: 250ms opacity;
    opacity: 0;
    background: rgba(0,0,0,.3);
}

.area-picker.active {
    transform: translateY(0);
    opacity: 1;
}

.area-picker .area-picker-bg {
    flex-grow: 1;
    position: relative;
}

.area-picker .area-picker-bg>scroll-view {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
}

.area-picker .area-picker-body {
    flex-grow: 0;
    height: 600upx;
    background: #fff;
    transform: translateY(100%);
    transition: 250ms transform;
    position: relative;
}

.area-picker.active .area-picker-body {
    transform: translateY(0);
}

.area-picker .area-picker-body>scroll-view {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
}

.area-picker .area-picker-cancel,.area-picker .area-picker-confirm {
    display: inline-block;
    padding: 24upx;
    color: #888;
}

.area-picker .area-picker-confirm {
    float: right;
    color: #00aa00;
}

.area-picker .area-picker-row {
    width: 100%;
    height: 500upx;
}
</style>
